<template>
  <view style="background: #f8f8f8;">
    <scroll-view scroll-y="true" show-scrollbar="false" style="height: calc(100vh - 88rpx);">
      <view class="msg-item flex-top" v-for="i in 50" :key="i">
        <up-avatar shape="circle" size="35"
                   :src="`https://picsum.photos/id/${i+1}/200/300?random=${i}`"></up-avatar>
        <view style="margin-right: auto;margin-left: 20rpx" class="flex-column-between">
          <view class="u-f-sl f-c-3">张三</view>
          <view class="u-f-sl content-item">
            asdfasdfasd阿斯顿发斯蒂芬是的阿斯顿法撒旦法撒旦法大 阿阿斯顿发斯蒂芬阿斯顿法撒旦发大水发 阿打发手打阿斯蒂芬阿范德萨大发多少
            asdfasdfasd阿斯顿发斯蒂芬是的阿斯顿法撒旦法撒旦法大 阿阿斯顿发斯蒂芬阿斯顿法撒旦发大水发 阿打发手打阿斯蒂芬阿范德萨大发多少
            asdfasdfasd阿斯顿发斯蒂芬是的阿斯顿法撒旦法撒旦法大 阿阿斯顿发斯蒂芬阿斯顿法撒旦发大水发 阿打发手打阿斯蒂芬阿范德萨大发多少
          </view>
          <view class="u-f-sm f-c-9" style="margin-top: 10rpx">昨天 10:20</view>
        </view>
      </view>
      <view style="height: 30rpx"></view>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'

const dataParams = ref({
  title: '系统消息',
  data: []
})


onLoad(() => {
  uni.setNavigationBarTitle({
    title: dataParams.value.title
  })
})
</script>


<style scoped lang="scss">
@import "~@/static/css/index.css";

.msg-item {
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 0 10rpx rgb(199, 199, 199);
  margin: 20rpx;
  padding: 20rpx;

  .content-item {
    color: rgba(0, 0, 0, 0.8);
    margin-top: 10rpx;
  }
}


</style>
